<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>[(${dto.menu.title})]</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	<!-- layui-列表页特定风格-->
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />
	
	<!-- ysui-->
	<link rel="stylesheet" href="/static/plugins/ysui/1.0.0/css/ysui.css" media="all">
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js?v=a"></script>
	<script type="text/javascript" src="/static/admin/js/ys_list_search_form.js"></script>
	
	<!-- iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />

	<!-- 在1.0上跳转新页面需要 -->
	<script type="text/javascript" src="/static/admin/js/xadmin.js"></script>
	
	<style>
	html {height: 100vh;background-color: #ffffff;}
	body {height: 100vh;}
	</style>
</head>
<body>
	<div class="ysui-row" style="height: 100%;">
		<!-- 左边面板【start】 -->
		<div id="id_panel_left_grid" class="ysui-col" style="width: 83%;">
					
			<table class="layui-hide" id="main_table" lay-filter="main_table"></table>
		
			<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
				<a th:each="button : ${dto.toolbar.buttonArr}" class="layui-btn layui-btn-normal layui-btn-xs" th:lay-event="${button.event}"><i class="iconfont" th:classappend="${button.icon}"></i>[(${button.name})]</a>
			</div>
			</script>
		
			<!-- 引用字段TPL自定义脚本 -->
			<th:block th:include="include/gird-tpl :: TPLScript"/>
			
			<!-- 引用按钮自定义脚本 -->
			<th:block th:with="menuId=${dto.menuId}" th:include="include/gird-btn :: BTNScript(menuId)"/>
		</div>
		<!-- 左边面板【end】 -->
		
		<!-- 右边面板【start】 -->
		<div id="id_panel_right_grid" style="background-color: #ffffff;max-width: 17%;height: 100%; float: right;">
		</div>
		<script th:inline="javascript">
		// 搜索表单初始化
		var ysListSearchForm = null;
		//使用layui的模块
		layui.use(['form', 'jquery', 'ys_list_search_form'], function(){
			var $ = layui.jquery,form = layui.form,ys_list_search_form = layui.ys_list_search_form;
			ysListSearchForm = ys_list_search_form.init({
				id_panel_search_form: 'id_panel_right_grid', // 搜索框容器ID
				id_grid_panel: 'id_panel_left_grid', // 表格容器ID
				id_table_main: 'main_table', // 主表格ID
				conditions: $.parseJSON(JSON.stringify([[${dto.conditions}]]))
			});
		});
		</script>
		<!-- 右边面板【end】 -->
	</div>
						
	<script th:inline="javascript">
	layui
		.extend({optimizeSelectOption: '/static/plugins/layui/extends/optimizeSelectOption/optimizeSelectOption'})
		.use(['form', 'element', 'table', 'dropdown', 'optimizeSelectOption', 'util', 'laydate'], function(){
		var element = layui.element;
		var table = layui.table;
		var dropdown = layui.dropdown;
		var form = layui.form;
		var util = layui.util;
		var $ = layui.jquery;
		var laydate = layui.laydate;
		
		// 创建渲染实例
		table.render({
			elem: '#main_table'
			,url:'[(${dto.menu.pathGridRequest})]' // 此处为静态模拟数据，实际使用时需换成真实接口
			,toolbar: '#toolbarDemo'
			,defaultToolbar: ['filter', {
					title: '刷新页面'
					,layEvent: 'LAYTABLE_REFRESH'
					,icon: 'layui-icon-refresh'
				}]
			,height: window.innerHeight // 最大高度减去其他容器已占有的高度差
			,limit : 50
			,limits : [50,100,200,500]
			,where: ysListSearchForm.getConds()
			,cellMinWidth: 95
			,totalRow: true // 开启合计行，true开启，false关闭
			,page: true
			,request: {
				pageName: 'page',
				limitName: 'size'
			}
			,skin: 'line'
			,even: false // 开启隔行背景
			,totalRow: true
			,cols: [ 
				[(${dto.colGrids})]
			 ]
			,done: function(res){
				var id = this.id;
	            
				// 文本框编辑事件
				$('input[lay-filter="_input_filter_text_on_table"]').on('change',function (e) {
					var value = $(this).val();
				    var tdElem = $(this).closest('td');
				    var trElem = tdElem.closest('tr');
				    var tableView = trElem.closest('.layui-table-view');
				    table.cache['main_table'][trElem.data('index')][tdElem.data('field')] = value;
					
					var dataCommit = {};
					dataCommit['[(${dto.primaryKey})]'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['[(${dto.primaryKey})]'];
					dataCommit[tdElem.data('field')] = value;
					doEditOnTable(dataCommit);
					return;
				});
				
				// 绑定选择框(转换)的值变化提交事件
				form.on('switch(_input_filter_checkbox_on_table)', function(data){
					//layer.tips(this.value + ' ' + this.name + '：'+ data.elem.checked, data.othis);
				    var value = this.checked ? 1 : 0;
				    modifyTableCacheBySwitch(data, value);
				});
				
				// 绑定选择框(下拉)的值变化提交事件
				form.on('select(_input_filter_selector_on_table)', function (data) {
				    console.log("data->>>>>>>>>>>>>>>>", data);
				    var selectElem = $(data.elem);
				    var tdElem = selectElem.closest('td');
				    var trElem = tdElem.closest('tr');
				    var tableView = trElem.closest('.layui-table-view');
				    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
					
				    var dataCommit = {};
					dataCommit['[(${dto.primaryKey})]'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['[(${dto.primaryKey})]'];
					dataCommit[tdElem.data('field')] = data.value;
					doEditOnTable(dataCommit);
				});


			}
			,error: function(res, msg){
				console.log(res, msg)
			}
		});

		//触发单元格工具事件
		table.on('tool(main_table)', function(obj){ // 双击 toolDouble
			var data = obj.data;
			//console.log(obj)
			if(obj.event === 'del'){
				layer.confirm('真的删除行么', function(index){
					obj.del();
					layer.close(index);
				});
			} else if(obj.event === 'edit'){
				layer.open({
					title: '编辑',
					type: 1,
					area: ['80%','80%'],
					content: '<div style="padding: 16px;">自定义表单元素</div>'
				});
			}
		});
		
		//触发表格复选框选择
		table.on('checkbox(main_table)', function(obj){
			console.log(obj)
		});
		 
		//触发表格单选框选择
		table.on('radio(main_table)', function(obj){
			console.log(obj)
		});
		 
		// 单元格编辑事件
		table.on('edit(main_table)', function(obj){
			console.log(obj);
			var field = obj.field //得到字段
			,value = obj.value //得到修改后的值
			,data = obj.data; //得到所在行所有键值
			
			var update = {};
			update[field] = value;
			obj.update(update);
			
			var dataCommit = {};
			dataCommit['[(${dto.primaryKey})]'] = data.[(${dto.primaryKey})];
			dataCommit[field] = value;
			
			doEditOnTable(dataCommit);
		});
		
		//行单击事件（双击事件为：rowDouble）
		table.on('rowDouble(main_table)', function(obj){
			var data = obj.data;
			if ("[(${dto.menuId})]" == '81'){
				window.top.xadmin.add_tab("财务事件明细","/indexCommonOfMenu?menuId=82");
			}else if("[(${dto.menuId})]" == '10166'){
				window.top.xadmin.add_tab("印章申请("+data.bid+")","/web/administration/webAdmUseSignetApplyController/toEdit?id="+data.id);
			}
			else {
				layer.alert(JSON.stringify(data), {
					title: '当前行数据：'
				});
			}
			
			//标注选中样式
			obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
		});
	
		// 更新table的cache
		function modifyTableCacheBySwitch(data, value) {
		    var table = layui.table;
		    var switchElem = $(data.elem);
		    var tdElem = switchElem.closest('td');
		    var trElem = tdElem.closest('tr');
		    var tableView = trElem.closest('.layui-table-view');
		    table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = value;
			
			var dataCommit = {};
			dataCommit['[(${dto.primaryKey})]'] = table.cache[tableView.attr('lay-id')][trElem.data('index')]['[(${dto.primaryKey})]'];
			dataCommit[tdElem.data('field')] = value;
			doEditOnTable(dataCommit);
		}
	});
	
	// 在表格上修改
	function doEditOnTable(dataCommit) {
		var indexOfLoading = layer.load(1, {
			shade: [0.5,'#000000'] //0.1透明度的白色背景
		});
		$.post('[(${dto.menu.pathGridEditRequest})]', dataCommit, function(res){
			if (res.code == 0) {
				layer.msg(res.msg);
				layer.close(indexOfLoading);
			} else {
				layer.close(indexOfLoading);
				layer.msg(res.msg);
			}
		});
	}
	
	// 
	$('body').on("mouseenter",".layui-table-body tr",function () {
	    $(this).siblings().find("div").css("color","#142A48");
	    $(this).find("div").css("color","#4DA1FF");
	})
	</script>
</body>
</html>